<template>
  <ToolboxWindow v-if="columnData" :show="dialogVisible" @close="dialogVisible = false" @more="showRaw = !showRaw"
    :showMore="true" :width="720">
    <template #title>
      <div style="display: flex; align-items: center">
        <h4>详细信息 {{ columnData.moment }}</h4>
        <el-tag style="margin-left: 12px" type="warning" size="small"
          v-if="columnData.extInfo && columnData.extInfo.standalone">独立进近</el-tag>
      </div>
    </template>

    <div v-if="showRaw">
      <el-scrollbar :height="contentHeight">
        <pre class="raw-content">{{ columnData }}</pre>
      </el-scrollbar>
    </div>
    <div v-else>
      <el-row :gutter="30">
        <el-col :span="15">
          <el-scrollbar :height="contentHeight">
            <div style="
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
              ">
              <PointChart :airportData="columnData" :showHeader="false" />
              <div class="chart-wrapper" style="width: 360px">
                <v-chart :option="option" :init-options="{ width: 360, height: 340 }" />
              </div>
            </div>
          </el-scrollbar>
        </el-col>
        <el-col :span="9">
          <el-scrollbar :height="contentHeight">
            <el-tree :data="treeData" default-expand-all style="font-family: Consolas" />
          </el-scrollbar>
        </el-col>
      </el-row>
    </div>
  </ToolboxWindow>
</template>

<script setup>
// import echarts
import { use } from "echarts/core";
// import * as echarts from "echarts/core";
import "echarts/lib/component/polar";
import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
import { RadarChart } from "echarts/charts";
import {
  LegendComponent,
  // TitleComponent,
  TooltipComponent,
  // GridComponent,
  // DatasetComponent,
  // TransformComponent,
  // PolarComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";

// import vue echarts
import VChart, { THEME_KEY } from "vue-echarts";

import { ref, computed } from "vue";
import useCommonStore from "@/store/common.js";
import PointChart from "../../AdvancedChart/PointChart.vue";
import AirportChart from "../../AdvancedChart/AirportChart.vue";

import ToolboxWindow from "@/components/ToolboxWindow";

use([
  CanvasRenderer,
  // SVGRenderer,
  RadarChart,
  LegendComponent,
  // TitleComponent,
  TooltipComponent,
  // GridComponent,
  // DatasetComponent,
  // TransformComponent,
  // PolarComponent,
  LabelLayout,
  UniversalTransition,
]);

const commonStore = useCommonStore();

const dialogVisible = ref(false);
const activeName = ref("进离港方向");
const showRaw = ref(false);
const contentHeight = ref("min(calc(100vh - 300px), 700px)");

const columnData = ref(null);
const open = (data) => {
  console.log("columnData: ", data);
  if (data) {
    columnData.value = data;
    dialogVisible.value = true;
    activeName.value = "进离港方向";
  }
};

defineExpose({ open });

const option = computed(() => {
  let max = Math.max(
    columnData.value.airport.ZUUU.type.DEP.point.BOKIR,
    columnData.value.airport.ZUUU.type.DEP.point.MUMGO,
    columnData.value.airport.ZUUU.type.DEP.point.IDBOR,
    columnData.value.airport.ZUUU.type.DEP.point.UBRAB,
    columnData.value.airport.ZUUU.type.DEP.point.ATVAX,
    columnData.value.airport.ZUUU.type.DEP.point.GURET,
    columnData.value.airport.ZUUU.type.ARR.point.MEXAD,
    columnData.value.airport.ZUUU.type.ARR.point.LADUP,
    columnData.value.airport.ZUUU.type.ARR.point.IGNAK,
    columnData.value.airport.ZUUU.type.ARR.point.EKOKA,
    columnData.value.airport.ZUUU.type.ARR.point.AKDIK,
    columnData.value.airport.ZUTF.type.DEP.point.BOKIR,
    columnData.value.airport.ZUTF.type.DEP.point.MUMGO,
    columnData.value.airport.ZUTF.type.DEP.point.ATVAX +
    columnData.value.airport.ZUTF.type.DEP.point.LUVEN,
    columnData.value.airport.ZUTF.type.DEP.point.UBRAB,
    columnData.value.airport.ZUTF.type.DEP.point.SAGPI,
    columnData.value.airport.ZUTF.type.ARR.point.MEXAD,
    columnData.value.airport.ZUTF.type.ARR.point.LADUP,
    columnData.value.airport.ZUTF.type.ARR.point.IGNAK +
    columnData.value.airport.ZUTF.type.ARR.point.ELDUD,
    columnData.value.airport.ZUTF.type.ARR.point.AKOPI,
    columnData.value.airport.ZUTF.type.ARR.point.BUPMI
  );
  return {
    darkMode: commonStore.darkMode,
    legend: {
      show: false,
      orient: "vertical",
      left: "middle",
      top: "middle",
      textStyle: {
        color: commonStore.darkMode ? "#ccc" : "#333",
      },
    },
    radar: {
      indicator: [
        { name: "兰州", max },
        { name: "昌都", max },
        { name: "云贵湘", max },
        { name: "重庆", max },
        { name: "西安", max },
      ],
      startAngle: 110,
      shape: "circle",
      center: ["50%", "50%"],
      axisLine: {
        lineStyle: {
          color: "#888",
          // type: "dotted",
        },
        length: 10,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#8884",
          // type: "dotted",
        },
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ["#8880", "#8881"],
        },
      },
    },
    label: { show: false },
    tooltip: {
      show: true,
      tigger: "axis",
    },
    series: [
      {
        name: "进/离港方向",
        type: "radar",
        data: [
          {
            value: [
              columnData.value.airport.ZUUU.type.DEP.point.BOKIR,
              columnData.value.airport.ZUUU.type.DEP.point.MUMGO,
              columnData.value.airport.ZUUU.type.DEP.point.IDBOR +
              columnData.value.airport.ZUUU.type.DEP.point.ATVAX +
              columnData.value.airport.ZUUU.type.DEP.point.LUVEN,
              columnData.value.airport.ZUUU.type.DEP.point.UBRAB,
              columnData.value.airport.ZUUU.type.DEP.point.GURET,
            ],
            name: "双流离场",
            itemStyle: { color: "#3498DB" },
            lineStyle: { color: "#3498DB" },
            areaStyle: { color: "#3498DB33" },
          },
          {
            value: [
              columnData.value.airport.ZUUU.type.ARR.point.MEXAD,
              columnData.value.airport.ZUUU.type.ARR.point.LADUP,
              columnData.value.airport.ZUUU.type.ARR.point.IGNAK,
              columnData.value.airport.ZUUU.type.ARR.point.EKOKA,
              columnData.value.airport.ZUUU.type.ARR.point.AKDIK,
            ],
            name: "双流进场",
            itemStyle: { color: "#E67E22" },
            lineStyle: { color: "#E67E22" },
            areaStyle: { color: "#E67E2233" },
          },
          {
            value: [
              columnData.value.airport.ZUTF.type.DEP.point.BOKIR,
              columnData.value.airport.ZUTF.type.DEP.point.MUMGO,
              columnData.value.airport.ZUTF.type.DEP.point.ATVAX +
              columnData.value.airport.ZUTF.type.DEP.point.LUVEN,
              columnData.value.airport.ZUTF.type.DEP.point.UBRAB,
              columnData.value.airport.ZUTF.type.DEP.point.SAGPI,
            ],
            name: "天府离场",
            itemStyle: { color: "#2ECC71" },
            lineStyle: { color: "#2ECC71" },
            areaStyle: { color: "#2ECC7133" },
          },
          {
            value: [
              columnData.value.airport.ZUTF.type.ARR.point.MEXAD,
              columnData.value.airport.ZUTF.type.ARR.point.LADUP,
              columnData.value.airport.ZUTF.type.ARR.point.IGNAK +
              columnData.value.airport.ZUTF.type.ARR.point.ELDUD,
              columnData.value.airport.ZUTF.type.ARR.point.AKOPI,
              columnData.value.airport.ZUTF.type.ARR.point.BUPMI,
            ],
            name: "天府进场",
            itemStyle: { color: "#F1C40F" },
            lineStyle: { color: "#F1C40F" },
            areaStyle: { color: "#F1C40F33" },
          },
        ],
      },
    ],
  };
});

const treeData = computed(() => {
  return [
    {
      label: `终端区: ${columnData.value.total}`,
      children: [
        {
          label: `双流机场: ${columnData.value.airport.ZUUU.total}`,
          children: [
            {
              label: `离场: ${columnData.value.airport.ZUUU.type.DEP.total}`,
              children: [
                {
                  label: `BOKIR: ${columnData.value.airport.ZUUU.type.DEP.point.BOKIR}`,
                },
                {
                  label: `GURET: ${columnData.value.airport.ZUUU.type.DEP.point.GURET}`,
                },
                {
                  label: `UBRAB: ${columnData.value.airport.ZUUU.type.DEP.point.UBRAB}`,
                },
                {
                  label: `ATVAX: ${columnData.value.airport.ZUUU.type.DEP.point.ATVAX}`,
                },
                {
                  label: `IDBOR: ${columnData.value.airport.ZUUU.type.DEP.point.IDBOR}`,
                },

                {
                  label: `LUVEN: ${columnData.value.airport.ZUUU.type.DEP.point.LUVEN}`,
                },
                {
                  label: `MUMGO: ${columnData.value.airport.ZUUU.type.DEP.point.MUMGO}`,
                },
              ],
            },
            {
              label: `进场: ${columnData.value.airport.ZUUU.type.ARR.total}`,
              children: [
                {
                  label: `MEXAD: ${columnData.value.airport.ZUUU.type.ARR.point.MEXAD}`,
                },
                {
                  label: `AKDIK: ${columnData.value.airport.ZUUU.type.ARR.point.AKDIK}`,
                },
                {
                  label: `EKOKA: ${columnData.value.airport.ZUUU.type.ARR.point.EKOKA}`,
                },
                {
                  label: `IGNAK: ${columnData.value.airport.ZUUU.type.ARR.point.IGNAK}`,
                },
                {
                  label: `LADUP: ${columnData.value.airport.ZUUU.type.ARR.point.LADUP}`,
                },
              ],
            },
          ],
        },
        {
          label: `天府机场: ${columnData.value.airport.ZUTF.total}`,
          children: [
            {
              label: `离场: ${columnData.value.airport.ZUTF.type.DEP.total}`,
              children: [
                {
                  label: `BOKIR: ${columnData.value.airport.ZUTF.type.DEP.point.BOKIR}`,
                },
                {
                  label: `SAGPI: ${columnData.value.airport.ZUTF.type.DEP.point.SAGPI}`,
                },
                {
                  label: `UBRAB: ${columnData.value.airport.ZUTF.type.DEP.point.UBRAB}`,
                },
                {
                  label: `ATVAX: ${columnData.value.airport.ZUTF.type.DEP.point.ATVAX}`,
                },
                {
                  label: `LUVEN: ${columnData.value.airport.ZUTF.type.DEP.point.LUVEN}`,
                },
                {
                  label: `MUMGO: ${columnData.value.airport.ZUTF.type.DEP.point.MUMGO}`,
                },
              ],
            },
            {
              label: `进场: ${columnData.value.airport.ZUTF.type.ARR.total}`,
              children: [
                {
                  label: `MEXAD: ${columnData.value.airport.ZUTF.type.ARR.point.MEXAD}`,
                },
                {
                  label: `BUPMI: ${columnData.value.airport.ZUTF.type.ARR.point.BUPMI}`,
                },
                {
                  label: `AKOPI: ${columnData.value.airport.ZUTF.type.ARR.point.AKOPI}`,
                },
                {
                  label: `ELDUD: ${columnData.value.airport.ZUTF.type.ARR.point.ELDUD}`,
                },
                {
                  label: `IGNAK: ${columnData.value.airport.ZUTF.type.ARR.point.IGNAK}`,
                },
                {
                  label: `LADUP: ${columnData.value.airport.ZUTF.type.ARR.point.LADUP}`,
                },
              ],
            },
          ],
        },
        {
          label: `绵阳机场: ${columnData.value.airport.ZUMY.total}`,
          children: [
            {
              label: `离场: ${columnData.value.airport.ZUMY.type.DEP.total}`,
              children: [
                {
                  label: `BOKIR: ${columnData.value.airport.ZUMY.type.DEP.point.BOKIR}`,
                },
                {
                  label: `SAGPI: ${columnData.value.airport.ZUMY.type.DEP.point.SAGPI}`,
                },
                {
                  label: `UBRAB: ${columnData.value.airport.ZUMY.type.DEP.point.UBRAB}`,
                },
                {
                  label: `JTG: ${columnData.value.airport.ZUMY.type.DEP.point.JTG}`,
                },
              ],
            },
            {
              label: `进场: ${columnData.value.airport.ZUMY.type.ARR.total}`,
              children: [
                {
                  label: `MEXAD: ${columnData.value.airport.ZUMY.type.ARR.point.MEXAD}`,
                },
                {
                  label: `AKDIK: ${columnData.value.airport.ZUMY.type.ARR.point.AKDIK}`,
                },
                {
                  label: `BUPMI: ${columnData.value.airport.ZUMY.type.ARR.point.BUPMI}`,
                },
                {
                  label: `IGNAK: ${columnData.value.airport.ZUMY.type.ARR.point.IGNAK}`,
                },
                {
                  label: `LADUP: ${columnData.value.airport.ZUMY.type.ARR.point.LADUP}`,
                },
              ],
            },
          ],
        },
        {
          label: `泸州/宜宾: ${columnData.value.airport.ZULZ.total +
            columnData.value.airport.ZUYB.total
            }`,
          children: [
            {
              label: `离场: ${columnData.value.airport.ZULZ.type.DEP.total +
                columnData.value.airport.ZUYB.type.DEP.total
                }`,
              children: [
                {
                  label: `IPLOL: ${columnData.value.airport.ZULZ.type.DEP.point.IPLOL +
                    columnData.value.airport.ZUYB.type.DEP.point.IPLOL
                    }`,
                },
                {
                  label: `MUMGO: ${columnData.value.airport.ZULZ.type.DEP.point.MUMGO +
                    columnData.value.airport.ZUYB.type.DEP.point.MUMGO
                    }`,
                },
              ],
            },
            {
              label: `进场: ${columnData.value.airport.ZULZ.type.ARR.total +
                columnData.value.airport.ZUYB.type.ARR.total
                }`,
              children: [
                {
                  label: `UBKER: ${columnData.value.airport.ZULZ.type.ARR.point.UBKER +
                    columnData.value.airport.ZUYB.type.ARR.point.UBKER
                    }`,
                },

                {
                  label: `LADUP: ${columnData.value.airport.ZULZ.type.ARR.point.LADUP +
                    columnData.value.airport.ZUYB.type.ARR.point.LADUP
                    }`,
                },
              ],
            },
          ],
        },
        {
          label: `南充机场: ${columnData.value.airport.ZUNC.total}`,
          children: [
            {
              label: `进场: ${columnData.value.airport.ZUNC.type.ARR.total}`,
              children: [
                {
                  label: `LADUP: ${columnData.value.airport.ZUNC.type.ARR.point.LADUP}`,
                },
                {
                  label: `IGNAK: ${columnData.value.airport.ZUNC.type.ARR.point.IGNAK}`,
                },
              ],
            },
          ],
        },
        {
          label: `其他: ${columnData.value.airport.OTHER.total}`,
        },
      ],
    },
  ];
});
</script>

<style scoped>
.chart-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 12px 0 4px;
}

.raw-content {
  color: var(--el-text-color-secondary);
  font-size: 14px;
  line-height: 18px;
}
</style>
